<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      lnglat: [], //存放经纬度
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "ddaa7795f24c1dec822bc929c53fd5e0", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.Marker"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          var map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [106.55, 29.57], //初始化地图中心点位置
          });
          var geocoder = new AMap.Geocoder({
            city: "010", //城市设为北京，默认：“全国”
            radius: 1000, //范围，默认：500
          });
          var marker = new AMap.Marker();
          let regeoCode = (lnglat) => {
            console.log("经纬度", lnglat);
            // var lnglat = this.lnglat;
            map.add(marker);
            marker.setPosition(lnglat); //设置点标记位置
            // 根据经纬度解析点击的地理位置信息
            geocoder.getAddress(lnglat, (status, result) => {
              if (status === "complete" && result.regeocode) {
                console.log("地理位置信息", result);
                var { province, city, district } =
                  result.regeocode.addressComponent;
                var address = result.regeocode.formattedAddress;
                // 子父通信
                this.$emit("pass-address", {
                  address,
                  province,
                  city,
                  district,
                  lnglat,
                });
              } else {
                console.log("根据经纬度查询地址失败");
              }
            });
          };

          map.on("click", (e) => {
            // console.log(e);
            let { lng, lat } = e.lnglat; //提取点击事件拿到的经纬度
            this.lnglat = [lng, lat];
            regeoCode([lng, lat]);
          });
          document.getElementById("regeo").onclick = regeoCode;
          document.getElementById("lnglat").onkeydown = function (e) {
            if (e.keyCode === 13) {
              regeoCode();
              return false;
            }
            return true;
          };
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>
